今日要點
》介紹 beautiful_timelines 專案
》下載並編譯 beautiful_timelines 專案
》程式架構研究

介紹 beautiful_timelines 專案

今天要介紹的Github專案，beautiful_timelines 是時間軸版面配置的示範專案。beautiful_timelines 包含一組常用的時間線的樣示，展示了使用 timeline_tile plugin 的效果。 JHBitencourt/beautiful_timelines 98 的星星，看起來還沒什麼觀注。但 timeline_tile 1.0.0 已經有 441 個讚，是很高分的 plugin。

先看看他 README.md 裡的運行畫面。

可以看到時間軸的呈現的確非常美觀生動。值得來研究看看。

下載並編譯 beautiful_timelines 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 beautiful_timelines 專案囉。

% git clone https://github.com/JHBitencourt/beautiful_timelines.git

Cloning into 'beautiful_timelines'...
remote: Enumerating objects: 186, done.
remote: Counting objects: 100% (186/186), done.
remote: Compressing objects: 100% (141/141), done.
remote: Total 186 (delta 34), reused 174 (delta 27), pack-reused 0
Receiving objects: 100% (186/186), 571.28 KiB | 195.00 KiB/s, done.
Resolving deltas: 100% (34/34), done.

% cd beautiful_timelines 
% flutter pub get

Running "flutter pub get" in example...     25.6s

嗯，這是目前本系列文最久的一次，嗯，看起來也下載的 plugin 大概有 80MB，

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。

一共有10個展示教學，每個展示也有程式碼可以展開來看，我們每2個來看看效果：

1、2

3、4

5、6

7、8

9、10

其他

程式架構研究

Main.dart : MaterialApp

showcase_timeline_tile.dart : ShowcaseTimelineTile, Scaffold, ListView

今天就先這樣吧。

好，第18天，寫完。

參考

JHBitencourt/timeline_tile
JHBitencourt/beautiful_timelines